I have an arbitrary number of tables with an arbitrary number of rows in each, and all tables are the same height. My initial approach was to just set the overall height of the table and hope the rows were smart enough to distribute themselves appropriately. That's not the case.

I have 4 different behaviors going on with 4 browsers, but I need them to all render at the very least in a similar way.

Safari & Chrome (WebKit): All rows are equal height, creating scroll bars as needed and fitting within table height.

Firefox: All rows are the height necessary to fit their content, with the remaining rows overflowing out of the table. Additionally, If the content of the rows does not take up all of the height, only the part of the table with content in it takes the background (though it seems, through use of Firebug, that the actual table [and TR] extend to the bottom of the proper table height).

IE: All rows are the height necessary to fit their content, with the remaining rows overflowing out of the table.

Obviously this only includes one version of each browser and additional variation would likely appear with more being tested.

Ideally, a solution where the browser renders TRs with less content smaller than those with larger content, while still using scrolling within the variable height TRs when the overall height of the table is not enough would be optimum. I could potentially see a solution to achieve that with JS, but can it be done with CSS? Or, if not, can the behavior that WebKit displays be made to work across the browsers? Thanks!

PS: Example can be found here.